<template>

  <n-form-item :label="component.description" :path="component.type" class="creative-component-form-item" >
    <n-switch v-model:value="component.value.switch" :disabled="component.required">
    </n-switch>
  </n-form-item>
  <div v-if="component.value.switch" class="creative-component-secend-form-item">
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      v-if="childrenComponent.expiring_timestamp" :rule="rule">
      <div class="flex-1 flex">
        <label class="text-right mr-10 text-label">倒计时时间</label>
        <NDatePicker type="datetime" v-model:value="form.begin_timestamp"></NDatePicker>
      </div>
    </n-form-item>
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      v-if="childrenComponent.time_type" :rule="rule">
      <div class="flex-1 flex">
        <label class="text-right mr-10 text-label">时间描述</label>
        <n-radio-group v-model:value="form.time_type">
          <n-radio-button :value="item.value" v-for="item in optional">{{ item.label }}</n-radio-button>
        </n-radio-group>
      </div>
    </n-form-item>
  </div>




</template>

<script setup lang="ts">
import { computed, reactive, ref, toRef, unref, watch } from 'vue';
import { useStore } from '@/store';
import Component from '@/store/modules/adv/component';
import { NSwitch } from 'naive-ui';

import {
  NDatePicker,
  NFormItem,
  NRadioGroup,
  NRadioButton
} from 'naive-ui'
const store = useStore();

const creativor = computed(() => store.state.adv.modal.creativor);
const props = withDefaults(defineProps<{
  component: Component
  path: Array<any>
}>(), {});

const component = toRef<any, any>(props, 'component')
const childrenComponent = computed(() => component.value.children || {});

const optional = computed(() => {
  const { enumeration } = childrenComponent.value.time_type && childrenComponent.value.time_type.enum_property ? childrenComponent.value.time_type.enum_property : {} as any;
  return (enumeration || []).map(_ => {
    return {
      ..._,
      label: _['description'],
      value: _['value']
    }
  })
})


const form = reactive({
  switch: component.value.value.switch || false,
  begin_timestamp: component.value.value.begin_timestamp || Date.now(),
  price: component.value.value.price || '',
  time_type: component.value.value.time_type || 'COUNTDOWN_TIME_START',
  expiring_timestamp: component.value.value.expiring_timestamp || 0
});
if(component.value.required) {
  form.switch = true;
}else {
  form.switch = false;
}

watch(form, () => {
  store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
    path: ['marketComponents', props.component.type],
    key: 'value',
    value: Object.assign({}, form)
  })
})

const rule = reactive({
  // required: true,
  // trigger: 'change',
  // validator(rule, value) {
  //   if (!form.price) {
  //     return new Error('你确定吗？')
  //   }
  //   return true;
  // }
})











</script>

<style lang="scss">
@import url('./style.scss');
</style>
